<template>
    <div>
        <el-table :data="filterTableData" row-key="id">
            <el-table-column prop="title" label="名称">
                <template #default="scope">
                    <el-link type="primary" @click="handleLocation(scope.row)">{{ scope.row.lab.title }}</el-link>
                </template>
            </el-table-column>

            <el-table-column label="预约人" v-admin>
                <template #header>
                    <el-input v-model="search" size="small" placeholder="请搜索"></el-input>
                </template>
                <template #default="scope">
                    <div>{{ scope.row.bookUsername }}</div>
                </template>
            </el-table-column>

            <el-table-column label="预约时间">
                <template #default="scope">
                    <el-tag style="height: 40px;line-height: 20px" type="primary" @click="handleLocation(scope.row)">{{
            moment(scope.row.bookTime).format("YYYY-MM-DD") }}
                        <br />
                        {{ class_method(scope.row.bookClass) }}
                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column prop="title" label="预约状态">
                <template #default="scope">
                    <el-tag :type="Book_state_type[scope.row.bookState]">{{ Book_state_text[scope.row.bookState] }}

                    </el-tag>
                </template>
            </el-table-column>

            <el-table-column label="操作" v-teacher>
                <template #default="scope">
                    <el-popconfirm title="您确定要撤销么?" confirm-button-text="确认" cancel-button-text="取消"
                        @confirm="handleDelete(scope.row)">
                        <template #reference>
                            <el-button round type="danger">撤销</el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" title="实验室位置" :fullscreen="true" v-if="dialogVisible">
            <LabMap :x="currentItem.x" :y="currentItem.y" :t="currentItem.title"></LabMap>
        </el-dialog>

    </div>
</template>
<script setup>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { ClassType, Book_state_text, Book_state_type, ADMIN, TEACHER } from '../../util/type'
import LabMap from '../../components/lab-manage/LabMap.vue'
import { useUserStore } from '../../store/useUserStore';
import moment from 'moment'
const tableData = ref([])
const search = ref("")
const filterTableData = computed(() => {
    return tableData.value.filter((data) => data.bookUsername.includes(search.value))
})

onMounted(() => {
    getList()
})
const { user } = useUserStore()
const getList = async () => {
    var res;
    if (user.role.roleType === ADMIN) {
        res = await axios.get(`/adminapi/books`)
    } else {
        res = await axios.get(`/adminapi/books?bookUsername=${user.username}`)
    }

    tableData.value = res.data
    console.log(res.data)
}

const class_method = (value) => {
    return ClassType.find(item => item.value === value).label
}

const currentItem = ref({})
const dialogVisible = ref(false)
const handleLocation = (item) => {
    dialogVisible.value = true
    currentItem.value = item.lab
}

const handleDelete = async ({ id }) => {
    await axios.delete(`/adminapi/books/${id}`)
    await getList()
}

const vTeacher = {
    mounted(el) {
        if (user.role.roleType === ADMIN) {
            el.remove();
        }
    }
}

const vAdmin = {
    mounted(el) {
        if (user.role.roleType !== ADMIN) {
            el.remove();
        }
    }
}

</script>